<template>
  <div>
    <!-- 顶部搜索区域 -->
    <div class="search-bar">
      <van-row class="test-row">
        <van-col span='3'><img :src="locationIcon" width="80%" class="locationIcon"></van-col>
        <van-col span='16'>
          <input type="text" class="search-input">
        </van-col>
        <van-col span='5'>
          <van-button size="mini" class="search-search">
            搜索
          </van-button>
        </van-col>
      </van-row>
    </div>

    <!--swipwer area-->
    <div class="swiper-area">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
          <img v-lazy="banner.image" width="100%"/>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- type bar -->
    <div class="type-bar">
      <div  v-for="(cate,index) in category" :key="index"  class="type-item">
        <img v-lazy="cate.image" width="90%" />
        <span>{{cate.mallCategoryName}}</span>
      </div>
    </div>

    <!--AD banner area-->
    <div class="ad-banner">
      <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
    </div>

    <!--Recommend goods area-->
    <div class="recommend-area">
      <div class="recommend-title">
        商品推荐
      </div>
      <div class="recommend-body">
        <!--swiper-->
        <swiper :options="swiperOption">
          <swiper-slide v-for=" (item ,index) in recommendGoods" :key="index">
            <div class="recommend-item">
              <img :src="item.image" width="80%" />
              <div>{{item.goodsName}}</div>
              <div>￥{{item.price}} (￥{{item.mallPrice}})</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!--<swiperDefault></swiperDefault>-->
    <floorComponent :floorData="floor1" :floorTitle="floorName.floor1"></floorComponent>
    <floorComponent :floorData="floor2" :floorTitle="floorName.floor2"></floorComponent>
    <floorComponent :floorData="floor3" :floorTitle="floorName.floor3"></floorComponent>

    <!--Hot Area-->
    <div class="hot-area">
      <div class="hot-title">热卖商品</div>
      <div class="hot-goods">
        <!--这里需要一个list组件-->
        <van-row gutter="20">
          <van-col span="12" v-for="(item,index) in hotGoods" :key="index">
            <goods-info :goodsId="item.goodsId"  :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price"></goods-info>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
  import swiperDefault from '../swiper/swiperDefault';
  import floorComponent from '../component/floorComponent';
  import goodsInfo from '../component/goodsInfoComponent';
  import {toMoney} from '@/filter/moneyFilter';
  import axios from 'axios';
  import url from '@/serviceAPI.config'
  export default {
    components:{
      swiperDefault,
      floorComponent,
      goodsInfo
    },
    filters:{
      moneyFilter(money){
        return toMoney(money)
      }
    },
    data () {
      return {
        swiperOption:{
          slidesPerView:3
        },
        locationIcon:require('../../assets/images/location.png'),
        bannerPicArray:[],
        category:[],
        adBanner:'',
        recommendGoods:[],
        floor1:[],
        floor2:[],
        floor3:[],
        floorName:{},
        hotGoods:[], //热卖商品
      }
    },
    created(){
      axios({
        url: url.getShoppingMallInfo,
        method: 'get',
      }).then(res=>{
        console.log(res)
        if(res.status === 200){
          let data = res.data.data;
          this.category= data.category;
          this.adBanner = data.advertesPicture; //获得广告图片
          this.bannerPicArray = data.slides;   //轮播图片
          this.recommendGoods = data.recommend;  //推荐商品
          this.floor1 = data.floor1;             //楼层1数据
          this.floor2 = data.floor2;             //楼层2数据
          this.floor3 = data.floor3;             //楼层3数据
          this.floorName = data.floorName;
          this.hotGoods = data.hotGoods;         //热卖商品
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  }
</script>

<style scoped>
  /*  顶部搜索区域 */
  .search-bar {
    height: 2.2rem;
    background-color: #e5017d;
    line-height: 2.2rem;
    overflow: hidden;
  }
  .locationIcon {
    padding-left: 0.3rem;
    padding-top: 0.1rem;
  }
  .type-item{
    flex:1;
  }
  .search-input {
    width: 100%;
    height: 1.3rem;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #fff;
    background-color: #e5017d;
    color: #fff;
  }
  .search-search {
    margin-left: .5rem;
  }
  /* 轮播图区域 */
  .swiper-area {
    clear: both;
    max-height: 15rem;
    height: 9.2rem;
    overflow: hidden;
  }
  /* type-bar */
  .type-bar {
    background-color: #fff;
    margin:0 .3rem .3rem .3rem;
    border-radius: .3rem;
    font-size:14px;
    display: flex;
    flex-direction:row;
    flex-wrap:nowrap;
  }
  .type-bar div {
    padding: .3rem;
    font-size: 12px;
    text-align: center;
    flex: 1;
  }
  .recommend-area {
    background-color: #fff;
    margin-top: .3rem;
  }
  .recommend-title {
    border-bottom: 1px solid #eee;
    font-size: 16px;
    padding: .2rem;
    color: #e5017d;
  }

  .recommend-body{
    border-bottom: 1px solid #eee;
  }

  .recommend-item{
    width:99%;
    border-right: 1px solid #eee;
    font-size: 12px;
    text-align: center;
  }
  /*hot-area*/
  .hot-area {
    text-align: center;
    width:20rem;
    font-size: 14px;
    height: 1.8rem;
    line-height: 1.8rem;
  }
  .hot-title {
    text-align: center;
  }
  .hot-goods{
    overflow: hidden;
    height: 130rem;
    background-color: #fff;
  }
</style>
